<template>
    <div class="avatar flex-center" :class="radius?'radius':''">
        <img :src="src" alt="" :showuserinfo="showuserinfo" :personalInfo="personalInfo">
    </div>
</template>

<script>
export default {
  name: 'avatar', // 头像
  data () {
    return {
      // 头像路径
      src: require('@/assets/Login/images/logo.png')
    }
  },
  props: {
    // 是否为圆角
    radius: {
      require: Boolean,
      default: false
    },
    // 头像ID
    imgID: {
      require: Number
    },
    // 头像类型
    fileType: {
      require: Number,
      default: 1
    },
    // ID
    id: {
      require: Number
    },
    // 点击头像展示信息框
    showuserinfo: {
      require: String | Number
    },
    // 点击侧边栏头像查看个人信息
    personalInfo: {
      require: String | Number
    }
  },
  computed: {
    addressList () {
      if (this.fileType === 1) {
        return this.$store.state.chatInformation.userList
      } else {
        return this.$store.state.chatInformation.groupList
      }
    },
    listLength () {
      return this.addressList.temp
    },
    contactInfo () {
      return {
        id: this.id,
        fileType: this.fileType,
        imgID: this.imgID
      }
    }
  },
  watch: {
    listLength: {
      deep: true,
      immediate: true,
      handler (val) {
        if (this.imgID === 'notification') {
          this.src = require('@/assets/message/notification.png')
          return
        }
        if (this.fileType === 1) {
          if (this.addressList[this.id] && this.addressList[this.id].user_img && this.src && this.src.slice(0, 4) !== 'blob') {
            this.src = this.addressList[this.id].user_img
          }
        } else {
          if (this.addressList[this.id] && this.addressList[this.id].group_img && this.src && this.src.slice(0, 4) !== 'blob') {
            this.src = this.addressList[this.id].group_img
          }
        }
      }
    },
    contactInfo: {
      deep: true,
      handler (val) {
        if (this.fileType === 1 && this.addressList[val.id] && this.addressList[val.id].user_img) {
          this.src = this.addressList[this.id].user_img
        } else if (this.fileType === 6 && this.addressList[val.id] && this.addressList[val.id].group_img) {
          this.src = this.addressList[this.id].group_img
        }
      }
    }
  },
  methods: {
    // 判断头像是否需要下载
    createAvatar () {
      if (!Number(this.imgID)) {
        return
      }
      // 判断用户缓存列表是否还未缓存该用户头像或者该用户缓存的头像ID与当前传入的头像ID不一致
      if (this.fileType === 1) {
        if ((!this.addressList[this.id].user_img || this.addressList[this.id].user_img_id !== this.imgID) && !this.$store.state.file.fileObject[this.fileType + '-' + this.imgID + '-' + undefined]) {
          this.$store.dispatch('file/downloadFile', {
            fileType: this.fileType,
            fileID: this.imgID
          }).then(result => {
            const src = this.tools.dataDealer.blobToUrl(result)
            this.$store.commit('chatInformation/supplement_user_img', {
              userID: this.id,
              userImg: src,
              userImgID: this.imgID
            })
          })
        }
      } else {
        if (!this.addressList[this.id].group_img && !this.$store.state.file.fileObject[this.fileType + '-' + this.imgID + '-' + undefined]) {
          this.$store.dispatch('file/downloadFile', {
            fileType: this.fileType,
            fileID: this.imgID
          }).then(result => {
            const src = this.tools.dataDealer.blobToUrl(result)
            this.$store.commit('chatInformation/supplement_group_img', {
              groupID: this.id,
              groupImg: src,
              groupImgID: this.imgID
            })
          })
        }
      }
    }
  },
  mounted () {
    this.createAvatar()
  }
}
</script>

<style lang="scss" scoped>
    .avatar{
        width: 100%;
        height: 100%;
        //background: linear-gradient(316deg, #4A53EF 0%, #6971FE 100%);
        overflow: hidden;
        border-radius: 2px;
        span{
            text-align: center;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #FFFFFF;
        }
        img{
          width: 100%;
          height: 100%;
        }
    }
    .radius{
      border-radius: 50%;
    }
</style>
